<template>
  <div>
    <div
      class="matchBattle"
      :class="{ not_shadow: not_shadow == true }"
      v-for="(match, index) in matchs"
      :key="match.id"
    >
      <div
        class="stage"
        v-if="
          match.com_type != 3 &&
          match.com_type != 2 &&
          match.com_type != 5 &&
          match.com_type != 6
        "
      >
        第{{ match.stage == "1" ? "一" : match.stage == "2" ? "二" : "" }}阶段
      </div>
      <div class="stage" v-if="match.com_type == 5">
        {{ match.second_order + 1 }}区
      </div>
      <div class="round">第{{ match.wheel }}轮</div>
      <div class="line"></div>
      <div class="battleBox">
        <div v-if="String(match.site).indexOf(',') == -1" class="groundName">
          {{ match.group_name }}——{{ match.ground_name }}-第{{ match.site }}场
        </div>
        <div v-else class="groundName">
          {{ match.group_name }}——{{ match.ground_name }}-第{{
            match.site.split(",")[0]
          }}场
        </div>
        <battle-com :match="match"></battle-com>
        <div class="battleInfo">
          <div class="TimeBox">
            <div class="Time">比赛用时</div>
            <div class="matchTime" v-if="match.game_time != null">
              {{ String(match.game_time).slice(0, 5) }}
            </div>
          </div>
          <div
            class="progress"
            v-if="match.status == 2 || match.status == 4"
            :class="{ goingcolor: match.status == 4 }"
          >
            <router-link
              v-if="match.status == 2 && match.live_status == 1"
              :to="{
                path: '/have',
                query: {
                  live_status: match.live_status,
                  cover: match.cover,
                  device_url: match.device_url,
                  name: match.group_name,
                  ground: match.ground_name,
                  indexs: index,
                  status: match.status,
                  mark: match.mark,
                  pandect_id: match.id,
                  com_id:match.com_id
                },
              }"
            >
              观看直播
            </router-link>
            <router-link
              v-if="match.status == 2 && match.live_status == 0"
              :to="{
                path: '/have',
                query: {
                  live_status: match.live_status,
                  cover: match.cover,
                  device_url: match.device_url,
                  name: match.group_name,
                  ground: match.ground_name,
                  indexs: index,
                  status: match.status,
                  mark: match.mark,
                  pandect_id: match.id,
                  com_id:match.com_id
                },
              }"
            >
              进行中
            </router-link>
            <router-link
              v-if="match.status == 4"
              :to="{
                path: '/have',
                query: {
                  live_status: match.live_status,
                  cover: match.cover,
                  device_url: match.device_url,
                  name: match.group_name,
                  ground: match.ground_name,
                  indexs: index,
                  status: match.status,
                  mark: match.mark,
                  pandect_id: match.id,
                  com_id:match.com_id
                },
              }"
            >
              比赛暂停
            </router-link>
          </div>
          <div class="progress end" v-if="match.status == 3">
            <a
              href="javascript:;"
              @click="
                end(match.group_name, match.ground_name, index, match.status)
              "
              >技术统计</a
            >
          </div>
          <div class="progress" v-if="match.status == 0">未开始</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "matchBattle",
  props: {
    matchs: Array,
    not_shadow: Boolean,
  },
  data() {
    return {};
  },
  mounted(){
      console.log(this.matchs);
  },
  filters: {
    wheelName: (battle) => {
      return battle.wheel_name;
    },
  },
  methods: {
    end(group_name, ground_name, index, status) {
      localStorage.setItem("matchsIndex", JSON.stringify(this.matchs[index]));
      this.$router.push({
        path: "/have",
        query: {
          name: group_name,
          ground: ground_name,
          indexs: index,
          status: status,
        },
      });
    },
    live(playerUrl) {
      console.log(playerUrl);
    },
  },
};
</script>
<style lang="less" scoped>
.matchBattle {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 2.3rem;
  margin-top: 0.3rem;
  padding-bottom: 0.1rem;
  padding: 0.2rem 0.1rem;
  box-shadow: 0 0.04rem 0.1rem 0.03rem #e6e6e6;

  .stage,
  .round {
    font-size: 0.32rem;
    width: 24px;
    display: flex;
    align-items: center;
    margin-left: 0.1rem;
  }

  .line {
    background: #bbbbbb;
    width: 0.02rem;
    height: 92%;
    margin: 0 0.1rem;
  }

  .battleBox {
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .groundName {
      color: #42b57d;
      text-align: left;
      font-size: 0.3rem;
      font-weight: bold;
      line-height: 0.4rem;
    }

    .battleInfo {
      display: flex;
      justify-content: space-between;

      .TimeBox {
        display: flex;
        align-items: baseline;

        .Time {
          width: 1.5rem;
          border: 0.02rem solid #bbbbbb;
        }

        .matchTime {
          margin-left: 0.1rem;
        }
      }

      .progress {
        width: 1.2rem;
        background: #42b574;
        color: #fff;

        a {
          color: #fff;
        }
      }

      .end {
        // background: #bbb;
      }

      .goingcolor {
        background: #ff8200;

        a {
          color: #fff;
        }
      }
    }
  }
}

.not_shadow {
  box-shadow: none;
}
</style>
